Overview

SharePoint Framework extensions extend the user experience toward the Modern Framework List and Library to render custom components.

When we deploy an SPFx extension List View Command set at the site collection level, by default, it’s available to all lists and libraries.

In this article, we are going to learn how to restrict the List View command set to a specific List or Library.

Let’s get started.

Step 1

Create an SPFx OOTB Extension List View Command Set solution using the previous article.

Add List view command set using SharePoint Framework Extension

  1. Type Code .

It will open the project into an open source IDE, i.e., Visual Studio Code (condition - Visual Studio Code needs to installed on your system).

Step 1 - Navigate to the Typecript file

Src -> extrensions -> metatdata -> MetadataCommandSet.ts

SharePoint Framework (SPFX) Extension - Restrict List View Command Set To Specific List Or Library
This command makes the command set enabled or disabled on item selection. We can target the same to List and Library to enable and disable List and Library.
  1. compareOneCommand.visible = event.selectedRows.length === 1;
Step 2 - Modified command
SharePoint Framework (SPFX) Extension - Restrict List View Command Set To Specific List Or Library
Replaced code base,
  1. public onListViewUpdated(event: IListViewCommandSetListViewUpdatedParameters): void {
  2. var Libraryurl = this.context.pageContext.list.title;
  4. const compareOneCommand: Command = this.tryGetCommand('COMMAND_1');
  5. if (compareOneCommand) {
  6. // This command should be hidden unless exactly one row is selected.
  7. compareOneCommand.visible = (event.selectedRows.length === 1 && Libraryurl == "BotFiles" );
  8. }
  9. }
Note
In the above code snippet, I have set the Library Url with current page list title, checked the condition if it's equal to the defined list or library, then made command set visible.

Step 3 - Build, Bundle and Package the Solution

Navigate to View -> Integrated Terminal

SharePoint Framework (SPFX) Extension - Restrict List View Command Set To Specific List Or Library
  1. Run Gulp Build
  2. Run Gulp Bundle –ship
  3. Run Gulp Package-solution –ship
Step 4 - Package Deployment
The package can be deployed at Tenant Level App Catalog or Site Collection Level Catalog. It really depends on the project scenario and governance policies. No changes are required in the above with either deployment solution.

I prefer to deploy at the site collection for this demo.

Navigate to Modern site collection.

Go to Site Content -> App for SharePoint -> Upload the .SPPKG file and click to deploy the solution.

If the same package already exists, don’t forget to check in the package otherwise it will not be available to other audiences.

SharePoint Framework (SPFX) Extension - Restrict List View Command Set To Specific List Or Library
OutPut

Navigate to Library; i.e. Targeted template.

Select the item in the library. Command Set will appear, as it is targeted to the library named "BotFiles".
SharePoint Framework (SPFX) Extension - Restrict List View Command Set To Specific List Or Library
Navigate to a different library and select the item. Command Set didn't appear, as it is mapped to the library named "BotFiles".
SharePoint Framework (SPFX) Extension - Restrict List View Command Set To Specific List Or Library
I hope you have learned something new in this article. Stay tuned with related articles to get more insights and learning.